<template>
  <div>
    <el-form :model="formDialog"
             ref="formDialog"
             :rules="rules"
             :inline="true">
      <el-col :span="24"
              class="mid-top">
        <el-col :span="12"
                class="mid-top-right"
                id="midTopRight">
          <el-form-item id="midSettingNo"
                        label="设备编号"
                        prop="reader_no">
            <el-input v-model="formDialog.reader_no"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12"
                class="mid-top-right"
                id="midTopType">
          <el-form-item id="midSettingNo"
                        label="设备型号">
            <el-input v-model="formDialog.model"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="24"
              class="mid-bottom-right">
        <span class="mid-bottom-span">IMEI</span>
        <el-input v-model="formDialog.imei"
                  style="float:left;"
                  autocomplete="off"></el-input>
      </el-col>
    </el-form>
    <div class="bottom-box">
      <el-button @click="onBack('formDialog')">返 回</el-button>
      <el-button type="primary"
                 @click="onSave('formDialog')">保 存</el-button>
    </div>
  </div>
</template>
<script>
import { readerApi } from '@/services/SystemSetting'
export default {
  props: {
    ontype: String,
    todos: String,
    catchBack: Function,
    catchSave: Function,
    modifyObject: Object
  },
  data () {
    return {
      bluetooth_reader_id: '',
      typeJudge: '',
      dialogFormVisible: false,
      formDialog: {
        reader_no: '',
        model: '',
        imei: '',
        bluetooth_reader_id: '',
      },
      rules: {
        reader_no: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //返回事件
    onBack (formDialog) {
      //清空
      this.formDialog.reader_no = '';
      this.formDialog.model = '';
      this.formDialog.imei = '';
      this.catchBack('0');
    },
    //保存事件
    onSave (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          if (this.typeJudge == '1') {
            readerApi.createBluetooth({
              data: {
                reader_no: this.formDialog.reader_no,
                model: this.formDialog.model,
                imei: this.formDialog.imei
              }
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success('添加成功!')
                this.catchSave('SUCCESS');
                //清空from表单中的记忆值
                this.formDialog.reader_no = '';
                this.formDialog.model = '';
                this.formDialog.imei = '';
              } else {
                this.$message.error(res.msg)
              }
            }).catch((error) => {
              console.log(error)
            });
          } else {
            this.formDialog.id = this.bluetooth_reader_id;
            this.formDialog.bluetooth_reader_id = this.bluetooth_reader_id;
            readerApi.updateBluetoothReader({
              data: this.formDialog
            }).then((res) => {
              if (res.code == 0) {
                this.$message.success('修改成功!')
                this.catchSave('SUCCESS');
                //清空from表单中的记忆值
                this.formDialog.reader_no = '';
                this.formDialog.model = '';
                this.formDialog.imei = '';
              } else {
                this.$message.error(res.msg)
              }

            }).catch((error) => {
              console.log(error)
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  watch: {
    modifyObject (n, o) {
      if (n != {}) {
        this.bluetooth_reader_id = n.bluetooth_reader_id;
        this.formDialog.reader_no = n.reader_no;
        this.formDialog.model = n.model;
        this.formDialog.imei = n.imei;
      } else {
        this.bluetooth_reader_id = '';
      }
      //console.log('子组件---对象改变时触发的后的值=', n, this.bluetooth_reader_id)
    },
    todos (n, o) {
      //console.log('组件弹框', n, o);
    },
    ontype (n, o) {
      this.typeJudge = n;
    }
  },
  created () {
    this.typeJudge = this.ontype;
    if (this.modifyObject != {}) {
      this.bluetooth_reader_id = this.modifyObject.bluetooth_reader_id;
      this.formDialog.reader_no = this.modifyObject.reader_no;
      this.formDialog.model = this.modifyObject.model;
      this.formDialog.imei = this.modifyObject.imei;
      //console.log('子组件---对象改变时触发的后的值=', this.modifyObject, this.bluetooth_reader_id)
    }
    //console.log('typeJudge=', this.typeJudge, this.ontype)
  }
}
</script>
<style lang="scss" scoped>
#midTopType {
  padding-left: 12px;
}
#midSettingNo {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/deep/.el-form--inline .el-form-item__content {
  display: inline-block;
  vertical-align: top;
  width: 74%;
}
.mid-right-span {
  width: 20%;
  height: 40px;
  line-height: 40px;
  display: block;
  float: left;
}
#midTopRight {
  padding-right: 12px;
}
.mid-top-right： {
  display: flex;
  flex-direction: row;
}
/deep/ .mid-top .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
.mid-bottom-span {
  display: block;
  float: left;
  width: 10%;
  height: 40px;
  line-height: 40px;
}
.mid-bottom-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 20px;
  margin-bottom: 20px;
}
/deep/ .mid-bottom-right .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 87%;
}
.bottom-box {
  text-align: center;
}
</style>